绝对定位:position:absolute
1、 指定了绝对定位后,元素就是一个定位元素,完全脱离文档流;
2、 原来的位置不会保留;
3、 绝对定位是相对于最近有定位属性的父元素进行定位,如果往上没找到有定位元素的你父元素,才会相对于body元素进行定位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<style type="text/css">
.hhxs{width:400px;height:400px;border:3px solid purple;margin:50px auto;position:relative;}
.box{width:302px;height:302px;border:3px solid blue;margin:50px auto}
.pst1,.pst2,.pst3{width:100px;height:100px;color:white;font-size:30px;line-height:100px;text-align:center}
.pst1{background:green; }
.pst2{background:blue;
left:100px;
}
.pst3{background:orange;
position:absolute;
left:20px;
top:20px
}
</style>
</head>
<body>
<div class="hhxs">
<div class="box">
<div class="pst1">1</div>
<div class="pst2">2</div>
<div class="pst3">3</div>
</div>
</div>
</body>
</html>
返回值: